<template>
  <div class="dashboard-container">
    <div v-show="showBox" class="Box">
      地址<el-input v-model="input" placeholder="请输入内容"></el-input>
      电话<el-input v-model="input" placeholder="请输入内容"></el-input>
      服务时间<el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <el-table
      :data="listData"
      style="width: 100%">
      <el-table-column
        prop="order_id"
        label="订单号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="service_time"
        label="上门时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gab"
        label="回收类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="done"
        label="订单状态"
        width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="订单发起时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="end_time"
        label="订单完成时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180">
      </el-table-column>
      <el-table-column 
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="Delete(scope.row.order_id,scope.$index)">删除</el-button>
          <el-button
            v-if="!scope.row.state"
            size="mini"
            @click="update(scope.row.order_id,scope.$index)">完成</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getOrders,updateOrder,deleteOrder} from '../../api/order'

export default {
  name: 'Dashboard',
  data(){
    return {
      listData:[],
      showBox:false,
      BoxData:{
        address:'',
        garbage:'',
        user_id:'',
        user_name:'',
        service_time:'',
        phone:'',
        nickname:'',
      },
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created(){
    getOrders().then(res=>{
      console.log(res.data)
      res.data.map(item=>{
        item.gab=item.garbage.join(',')
        item.done=item.state?'已完成':'未完成'
      })
      this.listData = res.data
    })
  },
  methods: {
      update(order_id,index) {
        updateOrder(order_id).then(res=>{
          this.listData[index].state = true
          this.listData[index].done = '已完成'
        })
      },
      Delete(order_id,index) {
        deleteOrder(order_id).then(res=>{
          this.listData.splice(index,1)
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    position: relative;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.Box{
  position: fixed;
  z-index: 999;
  width: 500px;
  height: 300px;
  background: orange;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>
